<!--
  * Time    : 2021-01-11 10:47:54
  * Author  : yinjing
  * Desc    : 成长数值
-->
<template>
    <div class="w750" :class="themes.theme">
        <div v-if="!paging.emptylist">
            <div class="headBox w750">
                <div class="contentBox">
                    <div class="title">{{ growthNum }}</div>
                    <div class="text">我的成长值</div>
                </div>
            </div>

            <div class="w-100">
                <div class="d-grid text-center j-center text-999 bg-f8 font-14 py-15p mx-15p" style="grid-template-columns: 2fr 1fr 1fr">
                    <span>订单编号</span>
                    <span>订单金额</span>
                    <span>成长值</span>
                </div>
                <van-list
                    v-model="paging.loading"
                    :finished="paging.finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="loadMore"
                    class="bg-fff"
                >
                    <div
                        class="d-grid text-center j-center font-14 py-2 mx-15p border-bottom border-c-f8"
                        style="grid-template-columns: 2fr 1fr 1fr"
                        v-for="(item, index) in list"
                        :key="index"
                    >
                        <span>{{ item.orderNumber }}</span>
                        <span>￥{{ item.orderAmount }}</span>
                        <span>{{ item.flag ? '+' : '-' }}{{ item.growthValue }}</span>
                    </div>
                </van-list>
            </div>
        </div>

        <!-- 没有数据时显示 -->
        <div
            v-if="paging.emptylist || paging.error"
            class="position-fixed top-0 bottom-0 left-0 right-0 text-fff"
            style="background: linear-gradient(360deg, #529afc 0%, #5d6efa 100%)"
        >
            <div style="height: 337px; width: 336px; left: 50%; top: 50%; transform: translate(-50%, -50%)" class="position-absolute">
                <img src="@/assets/images/grow-no-data-bg.png" alt="" class="w-100 h-100" />
            </div>
            <div class="contentBox">
                <div class="title">{{ growthNum }}</div>
                <div class="text">我的成长值</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getShareSalesGrowthList, getTotalGrowth } from 'api/extensionApi'
import PageUtil from 'utils/PageUtil'
const pageUtil = new PageUtil(getShareSalesGrowthList)

export default {
    name: '',
    components: {},
    data() {
        return {
            list: [],
            paging: {
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            growthNum: ''
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getGroupNum()
        pageUtil.loadListByPage(this, { pageSize: 15 })
    },
    methods: {
        loadMore() {
            pageUtil.loadListByPageMore()
        },

        // 获取总值
        getGroupNum() {
            getTotalGrowth().then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }
                // 如果为空则growthNum取0
                res.result == null || res.result.growthNum == null ? (this.growthNum = 0) : (this.growthNum = res.result.growthNum)
            })
        }
    }
}
</script>

<style scoped>
.headBox {
    height: 125px;
    background: url('~@/assets/images/growthNum-bg.png') no-repeat, linear-gradient(360deg, #529afc 0%, #5d6efa 100%);
    background-size: cover;
    position: relative;
}
.contentBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.title {
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 45px;
    text-align: center;
}
.text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
    text-align: center;
}
</style>
